import React,{Component} from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Ionicons from 'react-native-vector-icons/Ionicons';

import Index from './Index.js'
import Order from './Order.js'
import MyCenter from "./MyCenter";

const Tab = createBottomTabNavigator();

export default class BottomNav extends Component{
  render() {
    return (
      // 首页底部导航栏
      <Tab.Navigator tabBarOptions={{
        activeTintColor: 'red',
        inactiveTintColor: '#B2CBE0',
        style:{borderTopWidth:1,borderTopColor:'#B4B4B4'}
      }}>
        <Tab.Screen name="order" component={Order} options={{
          title:'订单',
          tabBarIcon: ({focused,color,size})=>(
            <Ionicons name={focused?'md-list-circle':'md-list-circle-outline'} size={size} color={color} />
          )}}
        />
        <Tab.Screen name="myCenter" component={MyCenter} options={{
          title:'我的',
          tabBarIcon: ({focused, color,size})=>(
            <Ionicons name={focused?'person-add':'person-add-outline'} size={size} color={color} />
          )}}
        />
        <Tab.Screen name="index" component={Index} options={{
          title:'首页',
          tabBarIcon: ({focused,color,size})=>(
            <Ionicons name={focused?'home':'home-outline'} size={size} color={color} />
          )}}
        />
      </Tab.Navigator>
    )
  }
}

